<template>
  <div class="breadcrumb">
    <el-breadcrumb separator-class="el-icon-arrow-right" separator="/"
                   style="height: 61px; display: flex; align-items: center">
      <el-breadcrumb-item><a href="/">商城</a></el-breadcrumb-item>
      <el-breadcrumb-item v-if="listInTree">商品列表</el-breadcrumb-item>
      <el-breadcrumb-item v-if="detailInTree">商品详情</el-breadcrumb-item>
      <el-breadcrumb-item v-if="ordersInTree">个人订单</el-breadcrumb-item>
      <el-breadcrumb-item v-if="cartInTree">购物车</el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>

<script>
export default {
  name: "Breadcrumb",
  data() {
    return {}
  },
  computed: {
    listInTree() {
      return this.$route.meta.tree.includes("list");
    },
    detailInTree() {
      return this.$route.meta.tree.includes("detail");
    },
    ordersInTree() {
      return this.$route.meta.tree.includes("orders");
    },
    cartInTree() {
      return this.$route.meta.tree.includes("cart");
    }
  }
}
</script>

<style scoped>
.breadcrumb {
  width: 300px;
}
</style>